import React from 'react'
import styles from './index.module.css'
import { Link } from 'react-router-dom'
import { REQURST_URL } from '../../../../utils/url'

export default class HouseList extends React.Component {
  state = {}
  // 渲染房屋列表
  renderList = () => {
    const { houseList } = this.props
    return houseList.map((item) => (
      <div key={item.houseCode} className={styles.house}>
        <div className={styles.imgWrap}>
          <img
            className={styles.img}
            src={`${REQURST_URL}${item.houseImg}`}
            alt=""
          />
        </div>
        <div className={styles.content}>
          <h3 className={styles.title}>{item.title}</h3>
          <div className={styles.desc}>{item.desc}</div>
          <div>{this.renderTag(item.tags)}</div>
          <div className={styles.price}>
            <span className={styles.priceNum}>{item.price}</span> 元/月
          </div>
        </div>
      </div>
    ))
  }
  // 渲染tag标签
  renderTag = (tags) => {
    return tags.map((item, i) => {
      const tagesClassName = 'tag' + (i + 1)
      return (
        <span className={[styles.tag, styles[tagesClassName]].join(' ')}>
          {item}
        </span>
      )
    })
  }
  render() {
    return (
      <div
        className={[
          styles.houseList,
          this.props.isSHowList ? styles.show : '',
        ].join(' ')}
      >
        <div className={styles.titleWrap}>
          <h1 className={styles.listTitle}>房屋列表</h1>
          <Link className={styles.titleMore} to="/home/list">
            更多房源
          </Link>
        </div>

        <div className={styles.houseItems}>
          {/* 房屋结构 */}

          {this.renderList()}
        </div>
      </div>
    )
  }
}
